import React from "react";
import './index.css';
import InformationBook from "../../../../Component/InformationBook";
import { Button,Radio,  } from 'antd';
import "../../../../Common/css/common.css";
import Blank from "../../../../Component/Blank";
import MessageUtil from "../../../../utils/MessageUtil";
import Payment from "../../../../Common/svg/Payment";
import AliSmall from "../../../../Common/svg/AliSmall";
import WeChatSmall from "../../../../Common/svg/WeChatSmall";
import Wallet from "../../../../Common/svg/Wallet";

export default class extends React.Component{
    
    constructor(props){
        super();
        this.state={
            value:"fly",
            visible: false
        }
    }
    cancel(){

    }
    commit(){
        MessageUtil.ConfirmPay();
    }
    
    render(){
        return(
            <div className="Courseware_Body">
                <div>
                    <div className="Courseware_Top_left">
                        <InformationBook text="AOPA资料书" subtext="更新时间:2020-05-21"/>
                    </div>
                    <div className="Courseware_Top_right">
                        <div className="CoursewarePay_Money">￥1980</div>
                    </div>
                </div> 
                <div className="Courseware_Body">
                    <div className="CoursewareTitle"><span className="CoursewarePay_Select_ICO"><Payment/></span>支付方式</div>
                    <div>
                    
                        <div className="" >
                            <Radio.Group onChange={e=>this.setState({value: e.target.value})} 
                                style={{width:"100%"}} value={this.state.value}>
                                <div onClick={e=>this.setState({value:"fly"})} className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><Wallet/></span>Fly余额支付（可用余额: ￥3000）
                                    <Blank/>  <Radio value={"fly"}></Radio></div>
                                <div  className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><AliSmall/></span>支付宝支付
                                    <Blank/><Radio value={"ali"} disabled={true}></Radio></div>
                                <div className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><WeChatSmall/></span>微信支付
                                    <Blank/><Radio value={"wechat"} disabled={true}></Radio></div>
                            </Radio.Group>
                        </div>
                    </div>
                    <div className="CoursewarePay_Bottom">
                            <a href="/study/courseware" target="_parent" alt="courseware"><Button style={{width:"182px"}} type="default" shape="round"  size="large" onClick={e=>this.cancel()}>
                            取消
                            </Button></a>
                            
                            <Button  style={{width:"182px",marginLeft:"0.2rem"}} type="primary"
                            shape="round"  size="large"  onClick={e=>this.commit()}>
                            确认支付
                            </Button>
                    </div>
                </div>
                <a id="commitSuccess" href="/coursewarePaySuccess" alt="success" target="Layout_MainContainer"> </a>
            </div>
        )
    }
}